<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            ul{list-style:none;}
            li{
                display:inline-block;
                width:100px;
                height:100px;
                background:pink;
                margin:5px;
            }
            
            @media all and (min-width:1px) and (max-width:450px){
                h2{color:deeppink;}
                ul li{background-color:deeppink;}
            }
            
            @media all and (min-width:451px) and (max-width:650px){
                h2{color:gold;}
                ul li{background-color:gold;}
            }
            
            @media all and (min-width:651px) and (max-width:800px){
                h2{color:greenyellow;}
                ul li{background-color:greenyellow;}
            }
            @media all and (min-width:801px) and (max-width:1024px){
                h2{color:#ccc;}
                ul li{background-color:#ccc;}
            }
        </style>
    </head>
    <body>
        <h2>CSS实例:媒体查询属性</h2>
        <div class='dlist'>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>